<template>
    <div class="home">
        <div class="body">
            <div class="title">来料验重</div>
            <div class="tool">
                <el-button type="primary" @click="getBarCodeFocus()">扫一扫</el-button>
                <input type="text" ref="barCode" v-model="barCode" style="z-index:-1;opacity:0;" @keyup.enter="getBarCodeInfo()"/>
            </div>
            <el-table
                :data="listInfo"
                :row-style="tableRowStyle"
                :header-cell-style="tableHeaderColor"
                highlight-current-row
                style="width: 100%;font-size:16px;margin-top:10px;"
                height="15.5rem"
            >
                <el-table-column label="序号" width="80" align="center">
                <template slot-scope="scope">{{scope.$index+1}}</template>
                </el-table-column>
                <el-table-column prop="MaterielName" label="厂家" align="center"></el-table-column>
                <el-table-column prop="ColorConfigName" label="叫料单号" width="200" align="center"></el-table-column>
                <el-table-column prop="SpecConfigName" label="款式" width="150" align="center"></el-table-column>
                <el-table-column prop="SpecConfigName" label="监区" width="150" align="center"></el-table-column>
                <el-table-column prop="StockCount" label="备货时间" width="150" align="center">
                    <template slot-scope="scope">{{scope.row.StockCount+scope.row.StockUnitName}}</template>
                </el-table-column>
                <el-table-column prop="StockCount" label="备货截止时间" width="150" align="center">
                    <template slot-scope="scope">{{scope.row.StockCount+scope.row.StockUnitName}}</template>
                </el-table-column>
                <el-table-column prop="StockCount" label="配送时间" width="150" align="center">
                    <template slot-scope="scope">{{scope.row.StockCount+scope.row.StockUnitName}}</template>
                </el-table-column>
                <el-table-column prop="SpecConfigName" label="配送数量" width="120" align="center"></el-table-column>
                <el-table-column prop="SpecConfigName" label="是否备齐" width="100" align="center"></el-table-column>
                <el-table-column prop="SpecConfigName" label="计划备货数量" width="150" align="center"></el-table-column>
                <el-table-column prop="SpecConfigName" label="实际备货数量" width="150" align="center"></el-table-column>
                <el-table-column prop="StockStr10" label="物料类型" width="100" align="center">
                    <template slot-scope="scope">{{(scope.row.StockStr10/1000).toFixed(3)}}</template>
                </el-table-column>
          </el-table>
        </div>
    </div>
</template>
<script>
export default {
  name: 'incomeweight',
  data () {
    return {
      listInfo: [],
      barCode: ''
    }
  },
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 扫描获取料框是否超重信息
    getBarCodeInfo () {

    },
    // 获取焦点
    getBarCodeFocus () {
      let vm = this
      vm.$refs.barCode.focus()
    }
  },
  mounted () {
    let vm = this
    vm.$nextTick(() => {
      vm.$refs.barCode.focus()
    })
  }
}
</script>
<style lang="scss" scoped>
@import "~@/css/common.scss";
</style>
<style lang="scss">
.tool{
    text-align: left;
    button{
        width: 2rem;
        height: 0.7rem;
        font-size: 0.25rem;
    }
}
</style>